{{define "cp_custom_commands"}}
{{template "cp_head" .}}

<style>
    .cc-panel {
        max-height: 500px;
        overflow-y: auto;
    }
    .cc-collapsibleDown:before{
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        content: "\f107";
        margin-right: 10px;
    }
    
    .cc-collapsibleUp:before{
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        content: '\f106';
        margin-right: 10px;
    }

    .cc-disabled {
      background-color: #6c757d !important ;
    }
    .cc-group-disabled {
      text-decoration: line-through;
      color: #d2322d !important;
    }
</style>

<header class="page-header">
    <h2>Custom commands</h2>
</header>

{{template "cp_alerts" .}}

<!-- Nav -->
<div class="row">
    <div class="col">
        <!-- Nav tabs -->
        <div class="tabs">
            <ul class="nav nav-tabs">
                <li class="nav-item {{if and (not .CurrentCommandGroup)}}active{{end}}">
                    <a data-partial-load="true" class="nav-link show {{if not .CurrentCommandGroup}}active{{end}}"
                        href="/manage/{{.ActiveGuild.ID}}/customcommands/">Ungrouped</a>
                </li>
                {{$dot := .}}
                {{range .CommandGroups}}
                <li
                    class="nav-item {{if $dot.CurrentCommandGroup}}{{if eq $dot.CurrentCommandGroup.ID .ID}}active{{end}}{{end}}">
                    <a data-partial-load="true"
                        class="nav-link show {{if $dot.CurrentCommandGroup}}{{if eq $dot.CurrentCommandGroup.ID .ID}}active{{end}}{{end}} {{if .Disabled}}cc-group-disabled{{end}}"
                        href="/manage/{{$dot.ActiveGuild.ID}}/customcommands/groups/{{.ID}}">{{.Name}}</a>
                </li>
                {{end}}
                <li class="nav-item">
                    <form class="form-horizontal" method="post"
                        action="/manage/{{.ActiveGuild.ID}}/customcommands/creategroup" data-async-form>
                        <input type="text" class="hidden" name="Name" value="Unnamed group">
                        <input clasS="nav-link show" type="submit" value="+"></input>
                    </form>
                </li>
            </ul>
            <!-- Tab panes -->
            <div class="tab-content">
                <div class="tab-pane active">
                    {{if not .CurrentCommandGroup}}<p>Create a new group to put allowed/denied roles/channels on
                        multiple commands at the same time, as well as keeping things organized.</p>{{else}}
                    <form class="form-horizontal" method="post"
                        action="/manage/{{.ActiveGuild.ID}}/customcommands/groups/{{.CurrentCommandGroup.ID}}/update"
                        data-async-form>
                        <div class="row" style="margin-bottom: 20px;">
                            <div class="col-6">
                                <div class="form-group">
                                    <label>Name </label>
                                    <input type="text" class="form-control" value="{{.CurrentCommandGroup.Name}}"
                                        name="Name" />
                                </div>
                                <div class="form-group">
                                    <label>Allowed roles (who can use these commands)</label><br>
                                    <select name="WhitelistRoles" class="multiselect form-control" multiple="multiple"
                                        id="require-roles-receive" data-placeholder="Everyone" data-plugin-multiselect>
                                        {{roleOptionsMulti .ActiveGuild.Roles nil .CurrentCommandGroup.WhitelistRoles}}
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>Denied roles (who cannot use these commands)</label><br>
                                    <select name="BlacklistRoles" class="multiselect form-control" multiple="multiple"
                                        id="blacklisted-roles-give" data-plugin-multiselect>
                                        {{roleOptionsMulti .ActiveGuild.Roles nil .CurrentCommandGroup.IgnoreRoles}}
                                    </select>
                                </div>
                                <div class="form-group">
                                    <button type="submit" class="btn btn-success">Save group settings</button>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="form-group">
                                    <label>Channels these commands can be used in (empty for all)</label><br>
                                    <select multiple="multiple" class="form-control" data-plugin-multiselect
                                        name="WhitelistChannels" data-placeholder="Everywhere">
                                        {{textChannelOptionsMulti .ActiveGuild.Channels .CurrentCommandGroup.WhitelistChannels }}
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>Channels Ignored</label><br>
                                    <select multiple="multiple" class="form-control" data-plugin-multiselect
                                        name="BlacklistChannels">
                                        {{textChannelOptionsMulti .ActiveGuild.Channels .CurrentCommandGroup.IgnoreChannels }}
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>Group Enabled?</label><br>
                                      {{checkbox "IsEnabled" "IsEnabled" "Enables or Disables the Group" (not .CurrentCommandGroup.Disabled) }}
                                </div>
                                <div class="form-group">
                                    <button type="submit"
                                        title="Group #{{.CurrentCommandGroup.ID}} - {{.CurrentCommandGroup.Name}} &#013;Deleted group's commands become ungrouped."
                                        class="btn btn-danger"
                                        formaction="/manage/{{.ActiveGuild.ID}}/customcommands/groups/{{.CurrentCommandGroup.ID}}/delete">Delete
                                        group</button>
                                </div>
                            </div>
                        </div>
                    </form>
                    {{end}}
                    <p>You have created <code>{{.CCCount}}</code> custom commands against the total limit of <code>{{.CCLimit}}</code> {{.AdditionalMessage}}</p>
                    <form method="post" action="/manage/{{.ActiveGuild.ID}}/customcommands/commands/new">
                        <input type="text" name="GroupID" hidden
                            value="{{if .CurrentCommandGroup}}{{.CurrentCommandGroup.ID}}{{end}}">
                        <button type="submit" class="btn btn-success" {{if ge .CCCount .CCLimit}}disabled{{end}}>Create
                            a new Custom Command</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="accordion accordion-primary" id="accordion" role="tablist">
    {{$guild := .ActiveGuild.ID}}
    {{$g := .ActiveGuild}}
    {{$dot := .}}
    {{range .CustomCommands}}
    <div class="card">
        <div class="card-header clearfix {{if .Disabled}} cc-disabled {{end}}">
            <form class="form-horizontal" method="post" method="post" action="/manage/{{$guild}}/customcommands/commands/{{.LocalID}}/update" data-async-form>
                <div class="pull-right">
                    {{if and (eq .TriggerType 5) (not .Disabled) }}
                        <button type="submit" class="btn btn-secondary" title="This will trigger this custom command immediately"
                        formaction="/manage/{{$guild}}/customcommands/commands/{{.LocalID}}/run_now" style="margin: 5px 5px 5px 0px!important">Run now</button>
                    {{end}}
                    <button type="button" title="#{{.LocalID}} - {{.TextTrigger}}" class="btn btn-success" onclick="window.location.href = '/manage/{{$guild}}/customcommands/commands/{{.LocalID}}/';" style="margin: 5px 5px 5px 0px!important">Edit</button>
                    <button type="submit" title="#{{.LocalID}} - {{.TextTrigger}}" class="btn btn-danger" formaction="/manage/{{$guild}}/customcommands/commands/{{.LocalID}}/delete" style="margin: 5px 5px 5px 0px!important">Delete</button>
                </div>
            </form>
            <h2 class="card-title">
                <a style="padding:15px 20px 10px 20px!important" data-toggle="collapse" data-parent="#accordion" href="#collapse_cmd{{.LocalID}}" aria-expanded="false" aria-controls="collapse_cmd{{.LocalID}}" class="cc-collapsibleDown">
                    #{{.LocalID}} -
                    {{index $dot.CCTriggerTypes .TriggerType}}
                    {{if and (ne .TriggerType 10) (ne .TriggerType 5) (ne .TriggerType 6)}}
                    : <span class="cc-text-trigger-span">{{.TextTrigger}}</span>
                    {{else if and (ne .TriggerType 10) (ne .TriggerType 6)}}
                    : <span class="cc-text-interval-span">Every {{call $dot.GetCCInterval .}} {{if eq (call $dot.GetCCIntervalType .) 1}}hour(s)</span>{{else}}minute(s)</span>{{end}}{{end}}{{if eq .TriggerType 5 9}} next run: <span class="cc-text-next-run-span">{{.NextRun.Time.UTC.Format "2006-01-02 15:04:05 MST"}}</span>{{end}}
                    {{if .Name.Valid}} 
                      <span style="padding:5px 20px 10px 20px!important" >Name: {{.Name.String}}</span>
                    {{end}}
                </a>
            </h2>
        </div>
        <div id="collapse_cmd{{.LocalID}}" class="collapse">
            <input type="text" class="hidden form-control" name="id" value="{{.LocalID}}">
            <div class="card-body p-0 cc-panel">
                {{range .Responses}}
                <pre class="m-0"><div class="code gotmplmd">{{.}}</div></pre>
                {{else}}
                <p>No responses</p>
                {{end}}
            </div>
        </div>
    </div>
    {{end}}
</div>

<script src="/static/vendorr/highlightjs/highlight.pack.js"></script>
<script src="/static/vendorr/highlightjs/line-numbers.js"></script>
<link rel="stylesheet" href="/static/vendorr/highlightjs/atom-one-dark.css">

<script>
  $(function () {
    let search = new URLSearchParams(window.location.search);
    if (search.has('import_err') && search.get('import_err') == 'true') {
      alert('Failed to import command, please check the url or the command itself.');
      window.location.search = '';
    }
  })

    // Register the custom language
    // its based off markdown with custom stuff in tags
    hljs.registerLanguage("gotmplmd", function (hljs) {
        var KEYWORDS = {
            keyword:
                'for range if else template end',
            literal:
                'true false nil',
            "built-in":
                'gt lt len index{{.HLJSBuiltins}}'
        };

        return {
            aliases: ['gomd'],
            case_insensitive: true,
            subLanguage: 'markdown',
            contains: [
                hljs.COMMENT(/\{\{\s?\/\*/, /\*\/\s?\}\}/),
                {
                    // open block statement
                    className: 'template-tag',
                    begin: /\{\{/, end: /\}\}/,
                    keywords: KEYWORDS,
                    contains: [
                        {
                            className: 'string',
                            variants: [
                                hljs.QUOTE_STRING_MODE,
                                { begin: '\'', end: '[^\\\\]\'' },
                                { begin: '`', end: '`' },
                            ]
                        },
                        {
                            className: 'number',
                            variants: [
                                { begin: hljs.C_NUMBER_RE + '[i]', relevance: 1 },
                                hljs.C_NUMBER_MODE
                            ]
                        },
                        {
                            className: 'name',
                            begin: /(\.|\$)\w+/,
                        }
                    ],
                },
            ]
        };
    })

    document.querySelectorAll('div.code').forEach((block) => {
        hljs.highlightBlock(block);
        hljs.lineNumbersBlock(block);
    });
    $('.collapse').on('shown.bs.collapse', function(){
    $(this).parent().find('.cc-collapsibleDown').removeClass('cc-collapsibleDown').addClass('cc-collapsibleUp');}).on('hidden.bs.collapse',function(){
        $(this).parent().find('.cc-collapsibleUp').removeClass('cc-collapsibleUp').addClass('cc-collapsibleDown');});
</script>
{{template "cp_footer" .}}

{{end}}
